<template>
    <div>
        <p>{{ num }}</p>
        <span>{{ num2 }}</span>
        <button @click="num++">num++</button>
    </div>
</template>
 
<script lang='ts' setup>
import { ref,reactive,onMounted, toRefs } from "vue"
    
let obj = {
    num:18
}
let  refobj = reactive(obj)
let{ num} = toRefs(refobj)




// 通过reactive创建的复杂的响应式数据，就相当于通过ref创建的复杂的响应式的数据的.value那一层的数据，减少一层调用，所以我们可以
// 然后这里toRefs的作用其实就是将复杂数据类型的属性进行解构时将其解构成ref创建的响应式数据，说白了要想将响应式的复杂数据接构成响应式的
// 普通数据，就需要reactive和torefs一起配合。

let obj2 = {
    num2:20
}
let refobj2 = ref(obj2)
// let { num2 } = toRefs(refobj2)
// 由上可知，想要解构，必须是要在响应式数据的.value那一层。所以也必须是要reactive与toRefs配合
let { num2 } = toRefs(refobj2.value)


</script>
 
<style lang = "less" scoped>
    
</style>